<template>
    <div class="sort-thead">
        <span class="title">{{ title }}</span>
        <div class="sort-btn-group">
            <img v-if="sorting != 'asc'" src="@/assets/icon/sort_asc.svg" />
            <img v-if="sorting === 'asc'" src="@/assets/icon/sort_asc_selected.svg" />
            <img v-if="sorting != 'desc'" src="@/assets/icon/sort_desc.svg" />
            <img v-if="sorting === 'desc'" src="@/assets/icon/sort_desc_seletced.svg" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'SortThead',
        props: {
            title: String,
            sorting: String // asc or desc
        }
    }
</script>

<style scoped>
    .sort-thead {
        display: flex;
        justify-content: start;
        align-items: end;
        height: 100%;
    }

    .sort-btn-group {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
    }

    img {
        height: 8px;
        transition: transform 0.2s;
    }
</style>
